<template>
  <!-- 这里是每个分类的商品组件 -->
  <div class="classify">
  
   <div class="recommend">
      <div class="recommendTop common1 container">
        <div class="left">
          <a href="">{{ classify.name }}</a> 
        </div>
        <div class="right">
         <a href="javascript:;" @click="goPro(id)">更多</a>   <span>
            <i class="iconfont icon-fanhui2"></i>
           </span>
        </div>
      </div>
          <!-- 商品 -->
      <div class="recommendCon  ">
        <ul v-if="goods.length" class="shopBox common1">
          <GoodCard v-for="good in goods" :key="good.id" :good="good" /> 
        </ul>
        <h1 v-else>该分类下还没有商品，敬请期待</h1>
      </div>
  </div>



    
   
  </div>
</template>

<script>
import { getGoods } from "../assets/request.js";
import GoodCard from "./GoodCard.vue";
export default {
  name: "ClassifyList",
  props: ["id", "classify"],
  data() {
    return {
      //多个商品数组
      goods: [],
    };
  },
  components: {
    GoodCard,
  },
  methods: {
   
  },
  async mounted() {
    let res = await getGoods({
      //记得填你们自己的id
      project_id: "260",
      classify_id: this.$props.id,
    });
    // console.log(res.data.result.rows);
    this.goods = res.data.result.rows;
  },
 
};
</script>

<style lang="scss" scoped>
@charset 'utf-8';
@import '../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
    @return ($a/1920)*100+vw
}
.classify {
  .recommend{
      margin-top: get(30);
    >.recommendTop{
        >.left{
            font-size: get(20);
            &:hover{
                a{
                    color: $color;
                }
                
            }
        }
        >.right{
            font-size: get(20);
            &:hover{
                a{
                    color: $color;
                }
                
            }
        }
    }
    //具体内容
    >.recommendCon{
        font-size: get(20);
        @extend.container;
        margin-top: get(20);
       
       >.shopBox{
        overflow: hidden;
         // width: get(1500);

         // height: get(500);
          //background-color: pink;
         
        
       }
    }
}
 
}
</style>
